<template>
	<view class="container">
		<!-- 报修 -->
		<uni-card>
			<u-form :model="params" ref="uForm" :rules="rules">
				<u-steps direction="column" dot>
					<u-steps-item title="公司名称">
						<text class="slot-icon" slot="icon">
							<u-icon name="account-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item>
								<u--input disabled border="bottom" v-model="params.companyName"></u--input>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="申报人">
						<text class="slot-icon" slot="icon">
							<u-icon name="account-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item>
								<u--input disabled border="bottom" v-model="params.apply_name"></u--input>
							</u-form-item>
						</template>
					</u-steps-item>
					<!-- <u-steps-item title="报修地址">
						<text class="slot-icon" slot="icon">
							<u-icon name="map-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item>
								<u--input border="bottom" v-model="params.apply_address"></u--input>
							</u-form-item>
						</template>
					</u-steps-item> -->
					<u-steps-item title="申报人电话">
						<text class="slot-icon" slot="icon">
							<u-icon name="phone-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item>
								<u--input disabled border="bottom" v-model="params.apply_phone" maxlength='11'></u--input>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="申报时间">
						<text class="slot-icon" slot="icon">
							<u-icon name="clock-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="apply_time" ref="item1">
								<uni-datetime-picker type="datetime" :clear-icon="false" v-model="params.apply_time"
									@change="timeChange" @maskClick="maskClick" />
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="具体情况说明">
						<text class="slot-icon" slot="icon">
							<u-icon name="bell-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="explain" ref="item1">
								<u--textarea placeholder="请输入内容" autoHeight v-model="params.explain"></u--textarea>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="图片">
						<text class="slot-icon" slot="icon">
							<u-icon name="bell-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item>
								<u-upload  :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="3"></u-upload>
							</u-form-item>
						</template>
					</u-steps-item>
				</u-steps>
				<u-form-item>
					<u-button style="width:40%;" type="primary" shape="circle" text="申请提交" @click="submit"></u-button>
					<u-button style="width:40%" type="error" shape="circle" text="重置" @click="reset"></u-button>
				</u-form-item>
			</u-form>
		</uni-card>
	</view>
</template>

<script>
	import {
		addRepairTask
	} from '@/api/api.js'
	export default {
		data() {
			return {
				show: false,
				params: {
					companyName:'',
					apply_name: '',
					apply_address: '',
					apply_phone: '',
					apply_type:2,
					apply_time: '',
					explain: '',
					photo: ''
				},
				// 图片
				fileList1: [],
				//图片暂存
				photoArray:[],
				// 验证
				rules: {
					apply_time: [{	
						type: 'string',
						required: true,
						message: '请选择预约时间',
						trigger: ['blur', 'change']
					}],
					explain: [{
						type: 'string',
						required: true,
						message: '请简要描述一下情况',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '维修申请'
			});
			// 用于在页面或组件加载完成后执行一些初始化操作。它会在页面或组件首次加载完成后被调用，并且只会被调用一次。
			//onReady 为uni-app支持的生命周期之一
		},
		onLoad() {
			let that = this
			let CompanyDropDownBox1 = that.$store.state.CompanyDropDownBox1 //通过全局状态管理vuex中或区公司字典
			console.log('company',CompanyDropDownBox1)
			uni.getStorage({
				key: 'userInfo',
				complete(res) {
					console.log('res', res)
					console.log(res.data.people_name)
					// 获取到公司字典通过find()函数查找dept_id相同的公司名称赋值给company
					let company = CompanyDropDownBox1.find(element => element.value == res.data.dept_id)
					if(company){
						console.log('company',company)
						that.$set(that.params, 'companyName', company.text)
						that.$set(that.params, 'apply_address', company.text)
					}
					that.$set(that.params, 'apply_name', res.data.nick_name)
					// that.$set(that.params, 'apply_address', res.data.address)
					that.$set(that.params, 'apply_phone', res.data.phonenumber)
				}
			})
			console.log('this.params', this.params)
		},
		methods: { 
			// 申报时间change事件
			timeChange(value) {
				console.log('timeChange', value)
				this.params.apply_time = value
			},
			/**
			 * 图片上传
			 */
			async afterRead(event) {
				console.log('图片上传event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log('fileList',this.fileList1)
			},
			// 删除图片
			deletePic(event) {
				console.log('删除图片',event)
				this[`fileList${event.name}`].splice(event.index, 1)
				this.photoArray.splice(event.index,1)
				this.params.photo = this.photoArray.join(',')
				console.log('deletePic',this.fileList1)
			},
			uploadFilePromise(url) {
				console.log('1231231',url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						url: 'https://lxsw.pcippc.com/api/water/savePicture', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let result = JSON.parse(res.data)
							this.photoArray.push(result.fileName)
							this.params.photo = this.photoArray.join(',')
							console.log('result',this.params)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			/**
			 * 立即提交
			 */
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log('then', this.params)
					addRepairTask(this.params).then(res => {
						console.log('res', res)
						if (res.data == 'success') {
							uni.showModal({
								title: '申请成功！',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						} else {
							uni.showModal({
								title: '申请失败！',
								showCancel: false,
							})
						}
					})
				}).catch(res => {
					console.log('catch', this.params)
				})

			},
			// 重置
			async reset() {
				this.fileList1 = []
				await this.$refs.uForm.clearValidate()
				await this.$refs.uForm.resetFields()
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>